'use strict';
var React = require('react');
var ReButton = require('../ReButton.jsx');
var ReProcessBar = require('../ReProcessBar.jsx');
class HomeProductItems extends React.Component {
    constructor(props) {
        super(props);
        this.renderContent = this.renderContent.bind(this);
        this.getAorText=this.getAorText.bind(this);
        this.productClick=this.productClick.bind(this);
        //此处需要对content进行修改，然而不能直接修改数据源，否则将引起各种未知错误（此处前后端渲染的时候都会修改content，导致数据源出错）
        this.state = {
            content: props.content.concat()
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            content: nextProps.content.concat()
        });
    }

    productClick(id) {
        //兼容旧版本,旧版本只有一个id，新版本改为对象以存放更多的数据
        if(typeof(id)=='object')
        {
            //alert(id.id);
            if(this.props.showTips){
                this.props.showTips();
            }
            else {
                alert("功能尚未开放！");
            }
        }
        else{
            //alert(id);
            if(this.props.showTips){
                this.props.showTips();
            }
            else {
                alert("功能尚未开放！");
            }
        }

    }

    //转换标签，检测到有itemHref 时动态替换{id}为参数进行路径跳转
    getAorText(text){
        if(this.props.itemHref){
            return <a href={this.props.itemHref.replace('{id}',this.state.content[0].linkId)}>{text}</a>;
        }
        else{
            return text;
        }
    }

    //渲染单条记录
    renderContent() {
        //行数据
        let content = this.state.content;
        let widthArray = this.props.widthArray;
        let itemTypes = this.props.itemTypes;
        let buttonText = this.props.buttonText;
        let contentArray = new Array();
        let widthArrayCount = 0;

        //所有可枚举自身属性名
        // let realContentName=Object.keys(content);

        for (var i = 0; i < itemTypes.length; i++) {
            if (itemTypes[i] == "button") {
                content.push(buttonText != undefined ? buttonText : '操作');
            }
        }
        //前几列文字
        for (var i = 1; i < content.length; i++) {
            /*if(realContentName[item]=='id'){
             continue;
             }*/
            //获取可用列
            /* var i=realContentName[item];*/
            let style = {
                width: widthArray[widthArrayCount]
            };

            switch (itemTypes[widthArrayCount]) {
                //正常文本
                case 'string':
                    var text = (content[i] && content[i].length > 20 ? content[i].substr(0, 19) + '...' : content[i]);
                    contentArray.push(<div key={"HomeProductItem"+widthArrayCount} className="HomeProductItem"
                                           title={content[i]}
                                           style={style}>{this.getAorText(text)}</div>);
                    break;
                //按钮
                case 'button':
                    contentArray.push(<div key={"HomeProductItem"+widthArrayCount} className="HomeProductItem"
                                           style={style}>
                        <ReButton reClass="HomeProductItem_Button"
                                  reButtonClick={this.productClick.bind(this,content[0])}>{content[i]}</ReButton>
                    </div>);
                    break;
                //带进度条
                case 'process':
                    contentArray.push(<div key={"HomeProductItem"+widthArrayCount} className="HomeProductItem"
                                           style={style}>
                    <span>
                    <div className="HomeProductItem_Bar"><ReProcessBar reClass="ReProcessBar_Font" isShowText={false}
                                                                       process={content[i]}></ReProcessBar></div>
                    <div
                        className="HomeProductItem_Process">{content[i].indexOf('%') >= 0 ? content[i] : content[i] + "%"}</div>
                        </span>
                    </div>);
                    break;
                //红色加大
                case 'largeRed':
                    contentArray.push(<div key={"HomeProductItem"+widthArrayCount} className="HomeProductItem largeRed"
                                           style={style}>{content[i]}</div>);
                    break;
                //带箭头
                case 'arrow':
                    contentArray.push(<div key={"HomeProductItem"+widthArrayCount}
                                           className={content[i]!==undefined&&content[i]!==null?content[i]<0?'HomeProductItem DownWords':'HomeProductItem UpWords':'HomeProductItem None'}
                                           style={style}>{content[i]}</div>);
                    break;
                case 'doubleString':
                    var contentArry = content[i].split('+');
                    var contentArryMain = contentArry[0] && contentArry[0].length > 20 ? contentArry[0].substr(0, 19) + '...' : contentArry[0];
                contentArray.push(<div key={"HomeProductItem"+widthArrayCount}
                                       className="HomeProductItem DoubleString"
                                       style={style}
                                           title={contentArry[0]}>
                        <div>{this.getAorText(contentArryMain)}</div>
                        <div>{this.getAorText(contentArry[1])}</div>
                    </div>);
                    break;
                default:
                    contentArray.push(<div key={"HomeProductItem"+widthArrayCount} className="HomeProductItem"
                                           style={style}>{content[i]}</div>);
                    break;
            }
            widthArrayCount++;
        }
        return contentArray;
    }

    render() {
        return (
            <div className="HomeProductItems">
                {this.renderContent()}

            </div>
        )
    }
}

module.exports = HomeProductItems;
